<template>
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="warn-detail examine-detail">
        <div class="tab-content">
          <div class="content1 detail-content">
            <table border="1" bordercolor='#EEE'>
              <tr>
                <td>电梯注册代码</td>
                <td v-text="resForm.registerCode"></td>
                <td>电梯名称</td>
                <td v-text="resForm.elevatorName"></td>
              </tr>
              <tr>
                <td>巡检人员</td>
                <td v-text="resForm.adminName"></td>
                <td>过期日期</td>
                <td v-text="resForm.invalidDate"></td>
              </tr>
              <tr>
                <td>巡查类型</td>
                <td>
                  <div class="examine-type-box">
                    <div class="examine-type" v-for="(item, index) in patrolTypeArr">
                      <el-checkbox disabled checked>{{item.name}}</el-checkbox>
                    </div>
                  </div>
                </td>
                <td>备注</td>
                <td v-text="resForm.brief"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
  @import '../../../../style/entry/components/tabDetail';
  .examine-type-box div {
    display: inline-flex;
  }

  .examine-type {
    margin-right: 20px;
  }

</style>
<script>
  import moment from 'moment'  // 时间格式转化
  import com from '../../../../js/common'
  import {getEleList, getExamineItemDetail, getExamineItems} from '@/api/getData'
  import HeadTop from "../../../../components/head-top/head-top"

  export default {
    name: 'examineDetail',
    components: {
      HeadTop
    },
    data() {
      return {
        title: '查看巡检',
        examineRecordCode: '', //巡查编号
        examineArr: [], //巡检类型数据
        examineDetailHas: [],
        patrolTypeArr: '',
        resForm: {
          brief: '',
          adminName: '',
          invalidDate: '',
          elevatorName: '',
          registerCode: '',
        },
      };
    },
    // 判断操作为添加/查看详情
    created() {
      // 获取巡查类型数据
      this.examineRecordCode = this.$route.query.code;
      this.getExamineDetail(this.examineRecordCode);
    },
    methods: {
      // 查看详情获取页面所需数据
      getExamineDetail(res) {
        getExamineItemDetail({code: res}).then((data) => {
          let info = data.data.data;
          info.invalidDate = info.invalidDate ? info.invalidDate.substring(0, 10) : info.invalidDate;
          let patrolTypeArr = info.patrolTypeId.split('|');
          this.getExamineItemsData(patrolTypeArr);
          this.resForm = info;
        }).catch((err) => {
          this.$message.error('查询详情信息失败')
        })
      },
      // 获取巡查类型数据
      getExamineItemsData(resTypeArr) {
        getExamineItems({
          pageNo: 1,
          pageSize: 1000,
        }).then((data) => {
          let info = data.data.data.data;
          let detailHasType = [];
          info.forEach(function (e) {
            resTypeArr.forEach(function (f) {
              if (e.id == f) {
                detailHasType.push({'name': e.name})
              }
            })
          })
          this.patrolTypeArr = detailHasType;
        }).catch((err) => {
          this.$message.error('查询巡检类型数据失败 ')
        })
      },
      // 返回上一级
      back() {
        this.$router.go(-1);
      },
    },
  }
</script>
